<template>
  <div>
      <header>
            <div>
                <span>
                    <p @click="chan()"><i class="logo"></i></p>
                    <!-- <a href="/maincon"></a> -->
                    <router-link to=""><i class="cart"></i></router-link>
                 </span>
            </div>
            <div class="treasure-search">
              <form action="">
                  <div class="search-left">
                      <input type="text" class="input-left" placeholder="在Kindle商店中搜索" aria-label="" data-aria-clear-label="" name="k" autocomplete="off" autocorrect="off" autocapitalize="off" dir="auto" value="" id="nav-search-keywords">
                  </div>
                  <div class="search-right">
                      <input type="submit" class="input-right" value="" aria-label="搜索">
                      <i class="nav-submit"></i>
                  </div>
              </form>
            </div> 
      </header> 
      <router-link to=""><div class="allclassfiy"><&nbsp;&nbsp;全部分类</div></router-link>
<!-- 轮播图 -->
        <div class="lunbo">
            <mt-swipe :auto="4000">
            <mt-swipe-item><img src="../../assets/images/swipe01_.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="../../assets/images/swipe02_.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="../../assets/images/swipe03_.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="../../assets/images/swipe03_.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="../../assets/images/swipe04_.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="../../assets/images/swipe05_.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="../../assets/images/swipe06_.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="../../assets/images/swipe01_.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="../../assets/images/swipe07_.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="../../assets/images/swipe08_.jpg" alt=""></mt-swipe-item>
            </mt-swipe>
        </div>
        <!-- 选择介绍 -->
        <div class="con">
            <div class="con-bottom">
                <div class="con-bottom1">
                     <!-- <img src="../../assets/images/shop1.jpg" class="bottom-img1" alt=""> -->
                    <ul>
                        <li><router-link to="/kindleshop"></router-link></li>
                        <li><router-link to=""></router-link></li>
                        <li><router-link to=""></router-link></li>
                        <li><router-link to=""></router-link></li>
                        <li><router-link to=""></router-link></li>
                    </ul>
                </div>
                <div class="con-bottom2">
                    <ul>
                        <!-- <img src="../../assets/images/shop2.jpg" class="bottom-img2" alt=""> -->
                        <li><router-link to=""></router-link></li>
                        <li><router-link to=""></router-link></li>
                        <li><router-link to=""></router-link></li>
                        <li><router-link to=""></router-link></li>
                        <li><router-link to=""></router-link></li>
                    </ul>
                </div>
            </div>
            <div class="red"><img src="../../assets/images/red.jpg" alt="" width="100%"></div>
        </div> 
        <!-- 电子书阅读器系列 -->
        <div class="read">
          <img src="../../assets/images/kindle1.jpg" alt="" width="100%">
          <img src="../../assets/images/kindle2.jpg" alt=""  width="100%">
          <div class="red-choose">
              <ul>
                <li><router-link></router-link></li>
                <li><router-link></router-link></li>
              </ul>
          </div>
        </div>
        <div class="read">
          <img src="../../assets/images/kindle4.jpg" alt=""  width="100%">
          <div class="red-choose">
              <ul>
                <li><router-link></router-link></li>
                <li><router-link></router-link></li>
              </ul>
          </div>
        </div>
        <div class="read">
          <img src="../../assets/images/kindle5.jpg" alt=""  width="100%">
          <div class="red-choose">
              <ul>
                <li><router-link></router-link></li>
                <li><router-link></router-link></li>
              </ul>
          </div>
        </div>
        <!-- 热门推荐 -->
        <div class="hot-recommend">
             <img src="../../assets/images/kindle1.jpg" alt="" width="100%">
            <div class="hotre-con">
              <router-link to="/kindle"><img src="../../assets/images/kind1.jpg" alt="" width="100%"></router-link>
              <router-link to=""><img src="../../assets/images/kind2.jpg" alt="" width="100%"></router-link>
              <router-link to=""><img src="../../assets/images/kind3.jpg" alt="" width="100%"></router-link>
            </div>
        </div>
        <!-- top100畅销排行榜 -->
        <div class="top100">
            <img src="../../assets/images/kindle1.jpg" alt="" width="100%">
            <div class="top100-header">
                <router-link to=""><span class="topheader-left">top100畅销排行榜</span><span class="topheader-right">></span></router-link>
            </div>
            <div class="top100-con">
                <div class="topcon-small">
                    <ul>
                        <li v-for="(item,index) in list">
                            <router-link to="{path:}">
                                <div class="mincon"><img :src="item.url" width="100%" class="topimg"></div>
                                <span>{{item.describle}}</span>
                                <span class="nextspan">{{item.author}}</span>
                                <i class="txt">kindle电子书</i>
                                <i class="start" :style="'background-position:'+item.position"></i>
                                <i class="num">{{item.num}}</i>
                            </router-link>

                        </li>
                    </ul>
                </div>
            </div>
        </div>
         <!-- 筛选 -->
        <div class="screen">
            <div class="screen-header">
                <i class="header-left">超过500000个搜索结果，位于Kin-...</i>
                <i class="header-right"><router-link to="/">筛选（1）>></router-link></i>               
            </div>
            <div class="screen-con">
                <ul>
                    <li v-for="(item,index) in trealist">
                        <div class="con-left"><img :src="item.url" alt=""> <i class="popular">{{item.popular}}</i></div>
                        <div class="con-right">
                            <p  class="right-one">{{item.title}}</p>
                            <p class="describe">{{item.describe}}</p>
                            <p class="right-two">{{item.price}}</p>
                            <p class="right-discount">{{item.discount}}</p>
                            <p class="right-evaluate"><i class="star"></i><i class="count" :style="'background-position:'+item.position"></i></p>
                           
                        </div>
                    </li>
                </ul>
            </div>
        </div>
          <!-- 尾部 -->
          <footer>
            <div class="trea-top" >
              <a href="#"><i class="trea-icon"></i><b class="trea-b">返回顶部</b></a>
              <!-- <router-link to="/maincon">11111</router-link> -->
            </div>
              <div class="nav-con">
                <nav>
                  <ul class="nav-list">
                    <li><router-link to="/maincon"><span> 首页<i class="right-logo">1</i></span></router-link></li>
                    <li><router-link to=""><span> 购物车<i class="right-logo"></i></span></router-link></li>
                    <li><router-link to=""><span> 我的亚马逊<i class="right-logo"></i></span></router-link></li>
                    <li><router-link to=""><span> 我的心愿单<i class="right-logo"></i></span></router-link></li>
                    <li><router-link to=""><span> 查找其他人的心愿单<i class="right-logo"></i></span></router-link></li>
                    <li><router-link to=""><span> 我的账户<i class="right-logo"></i></span></router-link></li>
                    <li><router-link to=""><span> 您的浏览记录<i class="right-logo"></i></span></router-link></li>
                    <li><router-link to=""><span> 我的\"订购与节省\"商品<i class="right-logo"></i></span></router-link></li>
                    <li><router-link to=""><span> 一键下单设置<i class="right-logo"></i></span></router-link></li>
                    <li><router-link to=""><span> 联系我们<i class="right-logo"></i></span></router-link></li>
                    <li><router-link to=""><span> 需要帮助？<i class="right-logo"></i></span></router-link></li>
                    <li><router-link to=""><span> 亚马逊完整网址<i class="right-logo"></i></span></router-link></li>
                  </ul>
                </nav>
              </div>  
              <div class="trealogin">
                <span class="login-one"><i>已经是客户了吗？</i><i></i><router-link to="">登录</router-link></span>
                <span class="login-foot"> © 1999-2020, Amazon.com, Inc. or its affiliates</span>
              </div>        
        </footer>  
  </div>
</template>
<style scoped>
*{
    margin: 0px;
    padding: 0px;
    list-style: none;
    box-sizing: border-box;
}

/* ----------------------header----------------------------------------- */
header{
    /* width: 100%; */
    min-height: 100px;
    background:#f7f7f7;
    position: relative;
}
.logo{
    width: 100px;
    height: 55px;
    background:url("../../assets/images/basic-logo.png")no-repeat -20px -400px;
    position:absolute;
    top: -5px;
    left: 0px;
    transform:scale( 0.5);
}

.cart{
    width: 65px;
    height: 45px;
    background:url("../../assets/images/basic-logo.png")no-repeat -259px -679px;
    position:absolute;
    top: 0px;
    right: 5px;
    transform:scale( 0.5);
}
/* --------------搜索框--------------------------------------- */
.input-left{
    width:80%;
    position: absolute;
    min-height: 40px;
    top: 47px;
    left: 15px;
    background: white; 
}
.input-right{
    width: 40px;
    height: 40px;
    background:#5b626a;
    position: absolute;
    right: 20px;
    top: 47px;
    
}
.nav-submit{
    position: absolute;
    right: 20px;
    top: 47px;
    width: 40px;
    height: 40px;
    transform:scale( 0.45);
    background:url("../../assets/images/basic-logo.png")no-repeat -80px -580px;
}
/* ------------------全部分类------------------------------------------- */
.allclassfiy{
    height: 50px;
    border: 3px solid #f3f3f3;
    background:#f7f7f7;
    line-height: 50px;
    color: black;
    font-weight: bold;
}
/* ----------------轮播图---------------------------------- */
.lunbo{
    height: 145px;
}
.lunbo .is-active{
    background: white;
}
.lunbo img{
    width: 100%;
    height: 150px;
}
/* ----------------------分店选择-------------------------- */
.con{
    padding: 20px  0px;
    border-top: 5px solid #cdcdcd;
    background: white;
}
.con-header{
    min-height: 33px;
    text-align: center;
    padding-top:5px;
}
.con-header span{
    display: inline;
    margin-right: 15px;
    color:  rgb(85, 85, 85);
    font-size: 12px;
    
}
.con-header span>i{
    font-weight:bold;
    font-size: 14px;
    font-style: normal;
}
.con-header .cgcolor{
    color: #0066c0;
}
/* 图片 */
.con-bottom1 ul{
    justify-content:center;
    display: flex;
    height: 85px; 
    background: url('../../assets/images/shop1-1.jpg') no-repeat center/cover ;
    border: 1px solid #f7f7f7;
    margin-bottom: 10px;
}
.con-bottom2 ul{
    justify-content:center;
    display: flex; 
    height: 120px;
    background: url('../../assets/images/shop2-1.jpg') no-repeat center/cover;
    border: 1px solid #f7f7f7;
}

.con-bottom a{
    display: block;
    height: 100px;
}
.con-bottom ul>li{
    width: 20%;   
}
.red{
  width: 414px;
  height: 78px;
}
.red-choose{
  background: url('../../assets/images/kindle3.jpg') center/cover;
}
.red-choose ul{
  display: flex;
}
.red-choose ul li{
  width: 50%;
  height: 134px;
}
.hotre-con{
  padding: 0px 10px;
}
/* --------------------------top100--------------------------------------------------- */
.top100-header{
    height: 40px;
    padding: 0px 20px;
    line-height: 40px;
    font-size: 20px;
    font-weight: normal;
    overflow: hidden;
}
.topheader-left{
    float: left;
    color: black;
}
.topheader-right{
    float: right;
    color: gray;
}
.top100-con{
    overflow-x: auto;
    overflow-y: hidden;
}
.top100-con::-webkit-scrollbar{
    display: none;
}
.top100-con .topcon-small ul{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 800px;
}
.top100-con .topcon-small ul li{
    width: 30%;
    height: 340px;
    margin-left:10px;
    position: relative;
}
.topcon-small span{
    font-size: 18px;
    color: black;
    display: block;
}
.topcon-small .mincon{
    min-height: 178px;
}
.topimg{
    display: block;
    margin-bottom: 10px;
    /* min-height: 168px; */
}
.topcon-small .nextspan{
    font-size: 16px;
    color: gray;
}
.topcon-small .txt{
    display: block;
    font-style: normal;
    color: gray;
}
.topcon-small .start{
    background:url('../../assets/images/bg.png');
    position:absolute;
    width: 185px;
    height: 35px;
    left: -45px;
    bottom: 15px;
    transform: scale(0.5);
}
.topcon-small .num{
    display: block;
     position: absolute;
     bottom: 5px;
    color: gray;
}

/*----------------------------- 筛选 ---------------------------------------*/
.screen{
    background: white;
    
}
i{
  font-style: normal;
}
.screen .screen-header{
    height: 40px;
    background:#f7f7f7 ;
    margin-top: 20px;
    overflow: hidden;
}
.screen-header .header-left{
    font-size: 13px;
    line-height: 40px;
    padding-left:20px;
    float: left;
}
.screen-header .header-right{
    font-size: 13px;
    line-height: 40px;
    float:right;
    font-weight: bold;
}
.screen-header .header-right a{
  color: #0066c0 ;
}
.screen-con p{
    margin:0px 0px;
    line-height: 20px;
}
.screen-con ul li{
    width: 100%;
    height: 220px;
    overflow: hidden;
}
.con-left{
    float: left; 
    /* background: pink; */
    height: 184px;
    width: 35%;
    position: relative;
}
.con-left .popular{
    position: absolute;
    background: #E67A00;
    color: white;
    /* height: 24px; */
    top: 15px;
    left: 0px;
    font-size: 12px;
    line-height: 24px;
    width: 74px;
    text-align: left;
}
.con-right{
    float:right;
    height: 184px;
    width:65%;
    text-align: left;
}
.con-left img{
    height: 170px;
    line-height: 184px;
    margin-top: 40px;;
}
.con-right .right-one{
    margin-top: 15px;;
    font-weight: bold;
    font-size: 16px;
    width: 250px;
}
.right-one .describe{
    color: #f7f7f7 ;
}
.right-two{
    color: #B12704;
    font-weight: bold;
}
.right-three{
    height: 22px;
    widows: 100px;
    position: relative;
}
.right-three i{
    display: inline;
    margin-right: 5px;
}
.right-three .cgcolor{
    background: url('../../../data/images/treasure/bg1.png') -167px -2px;
    width: 110px;
    height: 42px;
    position: absolute;
    top: -8px;
    left: -35px;
    transform: scale(0.4);
}
.right-three .nor{
    position: absolute;
    top: 0px;
    left: 40px;
    font-style: normal;
}
.right-evaluate{
  width: 200px;
  height: 20px;
  position: relative;
}
.count{
      position: absolute;
      background:url('../../assets/images/bg.png');
      width: 185px;
      height: 35px;
      left: -45px;
      bottom: -5px;
      transform: scale(0.5);
}
/* -------------------------底部导航栏------------------------------ */

footer{
  border-top:3px solid #cccccc;
  background: #f7f7f7 ;
}
.trea-top{
  padding-top:10px;
  border:1px solid #e7e7e7;
  padding-bottom: 10px;
  position: relative;
}
.trea-icon{
  background: url("../../../data/images/treasure/bg.png") -708px -10px;
  position: absolute;
  top: 5px;
  left: 0px;
  width: 15px;
  height:15px;
  transform: scale(0.5);
}
.trea-b{
  color:#0066c0 ;
  font-size:12px;
  padding-top:10px;
  margin-left: 20px;
  text-decoration: none
}
.nav-list{
    width: 96%;
    min-width: 200px;
    font-family: inherit;
    font-size: 12px;
    line-height: 1em;
    margin:0px auto;

}

.nav-toplogo{
  position:absolute;

}
.nav-con{
  padding-top: 10px;

}
.nav-list li{
    display: block;
    padding: 14px 27px 14px 17px;
    outline: 0;
    border:0.5px solid #e7e7e7;
    background-color:white;
    position: relative;
}
.right-logo{
    width: 10px;
    height: 15px;
    position: absolute;
    top:10px;
    right: 15px;
    background:url("../../assets/images/basic-logo.png")no-repeat -220px -680px;
    opacity: .30;
    display: block;
}
.nav-list span{
    color: #111;    
    font-size: 15px;
    line-height: 16px;
    background-color:white;
    display: block;
}
.trealogin{
  height: 100px;
  text-align: center;
}
.trealogin .login-one{
  display: block;
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 15px;
}
.login-one a{
  color:#0066c0 ;
}
.trealogin .login-foot{
  
  font-size:12px;

}
</style>
<script>
export default{
	data(){
		return{
             list:[]
		 	}
        },
        methods:{
            chan(){
            this.$router.push('/maincon')
         } 
        },
	mounted(){
            var _this=this;
            this.$http.get('./data/kindle.json') 
                .then((response)=> {
                console.log(response);
                this.list=response.data.list;
                this.trealist=response.data.trealist;
                console.log(this.list);
                console.log(this.item.position)
            })
            .catch(function (error) {
                console.log(error);
            })
            .then(function () {
                // always executed
            }) 
            }           
}
</script>